import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import { useUserStore } from '@/store/user';
import { storeToRefs } from 'pinia';
const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: '首页',
    component: () => import('@/pages/Home.vue'),
    meta: {
      requireAuth: true, // 需要用户权限
    },
    children: [
        {
            path: 'song',
            name: '歌曲',
            component: () => import("@/pages/Song.vue"),
            meta: {
                menu: 'discover',
                keepAlive: true,
            }
        },
        {
          path: 'songList',
          name: '歌单',
          component: () => import("@/pages/PlayList.vue"),
          meta: {
              menu: 'music',
              keepAlive: true,
          },
        },
        {
          path: 'songList/:id', // 动态路径段
          name: '歌单详情',
          component: () => import("@/pages/PlayListDetail.vue"), // 你需要创建一个SongDetail.vue组件
          props: true, // 允许路由组件接收`params`作为`props`
        },
        {
          path: 'recommendSong',
          name: '推荐歌曲',
          component: () => import("@/pages/RecommendSong.vue"), // 推荐歌曲页面
          props: true,
        },
        {
          path: 'personal', 
          name: '个人信息',
          component: () => import("@/pages/Personal.vue"), // 获取信息
          props: true, // 允许路由组件接收`params`作为`props`
        },
        {
          path: 'singer', 
          name: '歌手',
          component: () => import("@/pages/Singer.vue"), // 获取信息
          props: true, // 允许路由组件接收`params`作为`props`
        },
        {
          path: 'singer/:id', 
          name: '歌手详情',
          component: () => import("@/pages/SingerDetail.vue"), // 获取信息
          props: true, // 允许路由组件接收`params`作为`props`
        },
        {
          path: 'likeList', 
          name: '喜欢歌曲',
          component: () => import("@/pages/LikeList.vue"), // 获取信息
          props: true, // 允许路由组件接收`params`作为`props`
        },
        {
          path: 'musicMv', 
          name: 'MV查看',
          component: () => import("@/pages/MusicMv.vue"), // mv查看
          props: true, // 允许路由组件接收`params`作为`props`
        },
        {
          path: 'MvDetail/:id', 
          name: 'MV详情',
          component: () => import("@/pages/MvDetail.vue"), // mv详情
          props: true, // 允许路由组件接收`params`作为`props`
        },
        {
           path: 'musicInfo',
           name: '音乐资讯',
           component: () => import("@/pages/MusicInfo.vue"), // 获取信息
           props: true, // 允许路由组件接收`params`作为`props`
        },
        {
           path: 'musicInfo/:id', // 动态路径段
           name: '音乐资讯详情',
           component: () => import("@/pages/MusicInfoDetail.vue"),
           props: true, // 允许路由组件接收`params`作为`props`
        },     
        {
           path: 'songDetail/:id', // 动态路径段
           name: '歌曲详情',
           component: () => import("@/pages/SongDetail.vue"),
           props: true, // 允许路由组件接收`params`作为`props`
        },     
    ],
  },
  {
    path: "/login",
    component: () => import("@/pages/Login.vue"),
  },
  {
    path: '/register',     // 路径
    component: () => import("@/pages/Register.vue"),    // 跳转到的组件
  }, 
  {
    path: '/home',     // 路径
    component: () => import("@/pages/Home.vue"),    // 跳转到的组件
    meta: {
      requireAuth: true, // 需要用户权限
    }
  }, 
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

// 添加路由前置守卫
router.beforeEach((to, from, next) => {
  const store = useUserStore()
  // 获取当前登录状态及用户角色
  const { isLogin } = storeToRefs(store)
  // 判断该路由是否需要登录权限
  if (to.meta.requireAuth) {
    // 如果需要，则校验用户是否已经登录
    if (isLogin.value) {
      next()
    } else {
      // 如果用户未登录，则跳转到登录页面
      next('/login')
    }
  } else {
    next() // 如果不需要登录权限，直接进入页面
  }
});

export default router